import React from 'react';
import LogFactory from "log/LogFactory";
import {useReimburseAndState} from "./DetailsComponent";
import {App, Button, DatePicker, Drawer, Form, InputNumber, Select, Space} from "antd";
import {ReimburseDetailsType} from "type/ReimburseDetailsType";
import locale from "antd/es/date-picker/locale/zh_CN";
import TextArea from "antd/es/input/TextArea";
import dayjs from "dayjs";
import {fetchAddDetailsQuery, fetchGetItemOptions} from "../../../../redux/reducer/async/detailsAsyncAction";

const log = LogFactory.getLog("Reimburse.DetailsAdd");
const DetailsAddComponent = () => {
    const {reimburseId, state, dispatch, navigate} = useReimburseAndState();
    const [form] = Form.useForm<ReimburseDetailsType>();
    const {message} = App.useApp();
    const [loading, setLoading] = React.useState<boolean>(false);
    const onClose = () => navigate(".", {replace: true, state: {reimburseId, totalAmount: state.totalMoney}});
    const afterOpenChange = async () => {
        if (!state.itemOptions) {
            await dispatch(fetchGetItemOptions());
        }
    };
    if (state.defaultCheckedItem){
        setTimeout(() => {
            form.setFieldValue("item", state.defaultCheckedItem)
        }, 500);
    }
    const initialValues: Partial<ReimburseDetailsType> = {
        consumeMoney: 0.00,
        consumeDate: dayjs(new Date()),
    };
    const onReset = () => {
        form.setFieldsValue({item: "", consumeMoney: 0.00,remark: ""});
    };

    const onFinish = async (values: ReimburseDetailsType) => {
        setLoading(true) ;
        values.consumeDate = values.consumeDate.format("YYYY-MM-DD");
        values.reimburseId = state.reimburseId;
        let res = await dispatch(fetchAddDetailsQuery(values)).unwrap();
        log.request("添加报销记录结果: ", res);
        if (res.success) {
            // log.debug("添加报销记录成功: ", res);
            message.success("添加报销记录成功");
            // form.setFieldValue("item", optionCheckRef.current);
            form.setFieldValue("consumeMoney", 0.00);
            form.setFieldValue("remark", null);
        } else {
            log.debug("添加报销记录失败: ", values);
            message.error("添加报销记录失败");
        }
        setLoading(false) ;
    };

    return (
        <Drawer
            title={"添加报销记录"}
            afterOpenChange={afterOpenChange}
            destroyOnClose={true}
            open={true}
            onClose={onClose}
            maskClosable={false}
        >
            <Form<ReimburseDetailsType>
                form={form}
                layout="vertical"
                initialValues={initialValues}
                onFinish={onFinish}
            >
                <Form.Item<ReimburseDetailsType> name={"item"} label="报销项目"
                                                 rules={[{required: true, message: 'Please select option'}]}>
                    <Select
                        placeholder="Please selete item"
                        options={state.itemOptions}
                        loading={!state.itemOptions}
                        disabled={!state.itemOptions}
                    />
                </Form.Item>
                <Form.Item<ReimburseDetailsType> name={"consumeMoney"} label="消费金额"
                                                 rules={[{required: true, message: 'Please enter consumeMoney'}]}>
                    <InputNumber min={0.00} precision={2} addonBefore={"¥"}/>
                </Form.Item>
                <Form.Item<ReimburseDetailsType> name={"consumeDate"} label="消费时间"
                                                 rules={[{required: true, message: 'Please enter consumeDate'}]}>
                    <DatePicker locale={locale} format={"YYYY-MM-DD"}/>
                </Form.Item>
                <Form.Item<ReimburseDetailsType> name={"remark"} label="备注信息">
                    <TextArea rows={2}/>
                </Form.Item>
                <Form.Item
                >
                    <Space size={50}>
                        <Button loading={loading} type="primary" htmlType="submit">
                            添加
                        </Button>
                        <Button type={"primary"} onClick={onReset}>
                            重置
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </Drawer>
    );
};

export default DetailsAddComponent;